<template>
	<view>
		<view class="tab-bar">
			<u-tabs :list="list" :is-scroll="false" :current="current" active-color="#c6100e" height="80" bg-color="#f8f8f8" @change="change"></u-tabs>
		</view>
		
		<!-- 头条模块 -->
		
<view class="headline" v-for="(item,index) in headlineList" :key="index" v-if="current == 0">
    <view style="width: 186rpx;height: 258rpx;">
			<image :src=item.url mode=""></image>
		</view>
		<view class="detail">
			<view class="title">
				<text>{{item.title}}</text>
			</view>
			<view class="time">
				<text>展览时间：{{item.time}}</text>
			</view>
			<view class="amount">
				<text>{{item.amount}}人看过</text>
			</view>
			<view class="address">
				<text>{{item.address}}</text>
			</view>
		</view>
			</view>
		
		<!-- 商品模块 -->
      <view class="c1-list" v-if="current == 1">
    	<view class="list">
    	<view class="c1" v-for="(item,index) in auction" :key=index>
    	 <image src="../../../static/person.png" mode="" class="c1-image"></image>
    	 <view class="c1-text">
    	 	<text>{{item.name}}</text>
    	 </view>
			 <view class="c1-size">
			 	<text>{{item.size}}</text>
			 </view>
    	 <view class="c1-price">
    	 	<text>{{item.price}}</text>
    	 </view>
    	</view>
    	</view>
			
			<view class="list">
			<view class="c1" v-for="(item,index) in auction" :key=index>
			 <image src="../../../static/person.png" mode="" class="c1-image"></image>
			 <view class="c1-text">
			 	<text>{{item.name}}</text>
			 </view>
			 <view class="c1-size">
			 	<text>{{item.size}}</text>
			 </view>
			 <view class="c1-price">
			 	<text>{{item.price}}</text>
			 </view>
			</view>
			</view>
    </view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadStatus: 'loadmore',
				headlineList: [
					{
						title:'第27届“艺庐雅集”在杭州西卡艺术中心圆满举办',
						time:'2021-10-10至2021-11-20',
						amount:'9877',
						address: '杭州西卡艺术中心',
						url:'../../../static/kn.jpg'
					},
					{
						title:'第27届“艺庐雅集”在杭州西卡艺术中心圆满举办',
						time:'2021-10-10至2021-11-20',
						amount:'9877',
						address: '杭州西卡艺术中心',
						url:'../../../static/kn.jpg'
					},
					{
						title:'第27届“艺庐雅集”在杭州西卡艺术中心圆满举办',
						time:'2021-10-10至2021-11-20',
						amount:'9877',
						address: '杭州西卡艺术中心',
						url:'../../../static/kn.jpg'
					},
					{
						title:'第27届“艺庐雅集”在杭州西卡艺术中心圆满举办',
						time:'2021-10-10至2021-11-20',
						amount:'9877',
						address: '杭州西卡艺术中心',
						url:'../../../static/kn.jpg'
					}
				],
				auction:[
					{
						name:"金玉满堂连年有余四条屏",
						size:"刘换天 120*120",
						price:"￥3000"
					},
					{
						name:"鱼戏新荷动",
						size:"潘锡林 80*80",
						price:"￥5000"
					}
				],				
				list: [
					{
					name: '头条'
				  }, 
					{
					name: '商品',
				  }
				],
				current: 0
			}
		},
		
		methods: {
			change(index) {
			  this.current = index
			}
		}
	}
</script>



<style lang="scss" scoped>
	.tab-bar {
		margin-top: 40rpx;
	}
	.headline {
		display: flex;
		justify-content: flex-start;
		margin-top: 20rpx;
		width: 90%;
		margin: 5%;
	}
	
	.headline image {
		width: 186rpx;
		height: 258rpx;
		border-radius: 10rpx;
	}
	
	.detail {
		border-bottom: 2rpx solid #E8E8E8;
		margin-left: 20rpx;
	}
	
	.detail .title {
		font-size: 30rpx;
		font-weight: 700;
		color: #262626;
	}
	
	.detail .time {
	  color: #888888;
	  font-size: 24rpx;
	}
	
	.detail .amount {
		width: 142rpx;
		height: 34rpx;
		line-height: 34rpx;
		text-align: center;
		background-color: #f8e8e6;
		color: #C6100E;
		font-size: 24rpx;
		margin-top: 10rpx;
	}
	
	.detail .address {
		color: #888888;
		font-size: 24rpx;
		margin-top: 10rpx;
	}
		
		.c1-list {
			width: 90%;
			display: flex;
			justify-content: space-between;
		}
		
		.list {
		  width: 346rpx;
			margin-left: 3%;
			margin-top: 20rpx;
		}
		
		.list .c1 {
			width: 346rpx;
			border-radius: 10rpx;
			background-color: #fefffe;
			height: 520rpx;
			position: relative;
			margin-top: 20rpx;
		}
		
		.c1 .c1-image {
			width: 346rpx;
			height: 346rpx;
			border-radius: 10rpx 10rpx 0 0 ;
		}
		
		.c1 .c1-logo {
			width: 200rpx;
			height: 200rpx;
			position: absolute;
			right: 0;
			top: 0;
		}
		
		.c1 .c1-text{
			margin-left: 20rpx;
			font-size: 28rpx;
		}
		
		.c1 .c1-size {
			margin-left: 20rpx;
			color: #939393 ;
			font-size: 28rpx;
		}
		
		.c1 .c1-price {
			margin-left: 20rpx;
			color: #fc011a;
			font-size: 36rpx;
			font-weight: 700;
		}	
</style>
